<!--发布项目-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css}">
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">

    <title>发布项目</title>
</head>
<style type="text/css">
    .input-file input[type="file"] {
        position: absolute;
        top: 0;
        right: 0;
        height: 40px;
        opacity: 0;
    }
</style>
<style type="text/css">
    .fileinput-button {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

    .fileinput-button input {
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        font-size: 300px;
    }

</style>
<body>

<!--头部代码开始-->

<!--头开始-->
<header class="navbar-fixed-top headerbg" th:each="codeUser:${codeUsers}">
    <!--左上角logo-->
    <div class="logo">
        <a href="http://www.baidu.com" th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}" class="fl mt10">
            <img th:src="@{/mb/images/mclogo.png}" style="margin-top: -30px;margin-left: 30px" alt=""></a></div>

    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi">
                <h3>
                    <a th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}"><span>首页</span></a>
                </h3>
            </li>
            <li class="navLi"><h3><a href="#"
                                     th:href="@{/mc/item/loginItemsList(userNo=${codeUser.userNo})}"><span>项目</span></a>
            </h3></li>

            <li class="navLi">
                <h3>
                    <div th:if="${codeUser.type}==1">
                        <a href="#" th:href="@{/mc/item/myRelease(userNo=${codeUser.userNo})}"><span>我的发布</span></a>
                    </div>
                </h3>
            </li>

            <li class="navLi on">
                <h3>
                        <span th:if="${codeUser.type}==1">
                            <a href="#"
                               th:href="@{/mc/item/releaseProject(userNo=${codeUser.userNo})}"><span>项目发布</span></a></span>
                </h3>
            </li>
            <li class="navLi">
                <h3>
                        <span th:if="${codeUser.type}==2">
                            <a href="#"
                               th:href="@{/mc/stage/participatingProjects(userNo=${codeUser.userNo})}"><span>我的参与</span></a></span>
                </h3>
            </li>
            <li class="navLi"><h3><a href="#"
                                     th:href="@{/mc/logged/help(userNo=${codeUser.userNo})}"><span>帮助</span></a></h3>
            </li>
            <li class="navLi"><h3>
                <span th:if="${codeUser.image}">
                <img th:src="@{'/article/'+ ${codeUser.image}}" height="60px" width="60px"> </span>
                <span th:unless="${codeUser.image}">
                <img th:src="@{/images/center.png}" height="60px" width="60px">
                </span></h3>
                <div class="navSub">
                    <ul class="navSubList list-unstyled">
                        <li class="navSubLi">
                            <h4><a style="text-decoration: none" th:text="'hello，'+${codeUser.nickName}">hello，xxx</a>
                            </h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/userInformation(userNo=${codeUser.userNo})}">● 个人中心</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/moneyPay(userNo=${codeUser.userNo})}">● 我的开发宝</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/item/myCollection(userNo=${codeUser.userNo})}">● 我的收藏</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/advise(userNo=${codeUser.userNo})}">● 我要建议</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/}">● 退出登录</a></h4>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height: 200px;">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>
<!--动态线条结尾-->

<!--头部代码结束-->
<hr class="layui-bg-green" style="height: 3px;margin-top: 20px">

<div class="container pb-15" style="margin-top: 3px;margin-left: 25%">
    <!-- Example row of columns -->
    <div class="row">
        <div class="span12">

            <div class="label-div b-30 border-all pt-5 t-20" style="position: relative; padding-left: 0;">
                <span th:each="codeUser:${codeUsers}">
                <form class="layui-form" th:action="@{/mc/item/releaseProject1(userNo=${codeUser.userNo})}"
                      method="post" enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <div style="margin: 30px 0px 0px 60px;font-size: large;"><b>选择您的开发类型</b></div>
                        <div class="layui-input-block">
                            <br>
                            <input type="radio" name="project" value="1" title="Web网站" checked="checked">
                            <input type="radio" name="project" value="2" title="App开发">
                            <input type="radio" name="project" value="3" title="微信公众号">
                            <input type="radio" name="project" value="4" title="小程序">
                            <input type="radio" name="project" value="5" title="HTML应用">
                            <input type="radio" name="project" value="6" title="其它项目">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div style="margin: 30px 0px 0px 60px;font-size: large;"><b>选择您招募的开发者类型</b></div>
                        <div class="layui-input-block">
                            <br>
                            <input type="radio" name="needType" value="2" title="招募团队">
                            <input type="radio" name="needType" value="1" title="招募个人" checked="">
                            <br>
                        </div>
                    </div>

                    <div class="layui-form-item">
                    <label class="layui-form-label"><font size="4">项目名称</font></label>
                    <div class="layui-input-block">
                        <input type="text" name="itemName" lay-verify="itemName" autocomplete="off"
                               placeholder="请输入5-30个字符"
                               class="layui-input"
                               style="height: 30px;width: 500px;">
                    </div>
                </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">项目图片</font></label>
                        <div class="layui-input-block">

                <p>
                      <span class="btn btn-success fileinput-button">
                                <span>上传</span>
                            <input type="file" id="xdaTanFileImg" name="itemImage" onchange="xmTanUploadImg(this)"
                                   accept="image/*"/>
                            </span>
                <input class="btn btn-success fileinput-button" type="button" value="隐藏图片"
                       onclick="document.getElementById('xmTanImg').style.display = 'none';"/>
                <input class="btn btn-success fileinput-button" type="button" value="显示图片"
                       onclick="document.getElementById('xmTanImg').style.display = 'block';"/>
            </p>
            <img id="xmTanImg"/>
            <div id="xmTanDiv"></div>


                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">项目预算</font></label>
                        <div class="layui-input-block">
                            <font size="5" style="margin-left: 10px" >元</font>
                            <input type="text" name="money" lay-verify="money" autocomplete="off"
                                   placeholder="项目金额不得超出￥1,000,000.00" class="layui-input"
                                   style="height: 30px;width: 280px;float: left">&nbsp;
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">期望交付周期</font></label>
                        <div class="layui-input-block">
                            <font size="5" style="margin-left: 10px">天</font>
                            <input type="text" name="day" lay-verify="day" autocomplete="off"
                                   placeholder="请输入交付周期,至少为3天"
                                   class="layui-input"
                                   style="height: 30px;width: 280px;float: left">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">项目描述</font></label>
                        <div class="layui-input-block">
                            <textarea maxlength="500" placeholder="请尽量详细描述您的项目，以吸引更多有相关开发经验的开发者报名（20个字符以上）"
                                      name="text" lay-verify="text" class="layui-textarea"
                                      style="width: 520px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">相关文档（选填）</font></label>
                        <div class="layui-input-block">
                             <span class="btn btn-success fileinput-button" style="margin-top: 30px">
                                <span>上传</span>
                               <input type="file" multiple="multiple" id="test" name="demandDocument">
                            </span>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">招募要求</font></label>
                        <div class="layui-input-block">
                            <textarea maxlength="500" placeholder="您可以对开发者所在地区、从事行业、擅长技能等方面提出要求" class="layui-textarea"
                                      name="itemNeedText" lay-verify="itemNeedText" style="width: 520px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div style="margin-left: 15px;"><font size="5">联系信息</font></div>
                        <br/>
                        <div style="float: left;    ">
                        <div class="layui-input-block">
                            <font size="4">邮箱</font>
                            <input type="text" readonly="readonly" name="email" lay-verify="email" autocomplete="off"
                                   placeholder="您的邮箱" th:value="${codeUser.email}"
                                   class="layui-input"
                                   style="height: 30px;width: 280px;">
                        </div>
                        <div class="layui-input-block">
                            <font size="4">手机</font>
                            <input type="text" readonly="readonly" name="phoneNum" lay-verify="phoneNum"
                                   autocomplete="off" placeholder="您的手机" th:value="${codeUser.phoneNum}"
                                   class="layui-input"
                                   style="height: 30px;width: 280px;">
                        </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 400px;">
                            <input type="submit" class="layui-btn" lay-submit="" lay-filter="demo1"
                                   style="width: 100px;" value="发布"/>

                        </div>
                    </div>
                </form>
                </span>
            </div>

        </div>
    </div>
</div>


<hr class="layui-bg-green" style="height: 3px;margin-top: 20px">


<!--联系我们-->
<div class="contact-container">
    <div class="contact-connect-container">
        <div class="button-container">
            <img th:src="@{/images/contacts.png}"/><span style="margin-left: 5px;">联系我们</span>
        </div>
        <div class="pop" style="display: none;">
            <div class="word" style="text-align: center;"><span style="font-size: 12px;">在线咨询请扫描下面二维码👇</span></div>
            <div style="height: 120px;width: 120px;margin:20px 22px;">
                <img th:src="@{/images/QR.jpg}" style="width: 120px;height: 120px;margin-top: -15px;"/>
            </div>
        </div>
    </div>
</div>


<footer class="footerBg">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span>
        <span style="padding-right: 10px" class="CopyRight_name">码虫互联网服务外包平台 </span></div>
</footer>


</body>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script type="text/javascript" th:src="@{/js/function.js}"></script>
<script type="text/javascript" th:src="@{/js/list.js}"></script>
<script type="text/javascript" th:src="@{/js/borsertocss.js}"></script><!-- 判断在IE9以下浏览器中根据像素的不同而设置的样式 -->
<script th:src="@{/layui/dist/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<!--引入-->


<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        // 项目名称
        form.verify({
            itemName: function (value) {
                if (value.length < 5) {
                    return '项目名称至少得5个字符';
                }
                else if (value.length > 30) {
                    return '项目名称最多30个字符';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 项目预算
        form.verify({
            money: function (value) {
                if (Math.floor(value) == value) {
                    if (value.length == 0) {
                        return '项目预算不能为空';
                    }
                    else if (value < 100)
                        return '项目预算至少为100元';
                    else if (value > 1000000)
                        return '项目预算不能超过100万元';
                }
                else return '请输入正确的字符';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        // 自定义验证规则 项目周期
        form.verify({
            day: function (value) {
                if (value.length == 0)
                    return '项目周期不能为空';
                var ex = /^\d+$/;
                if (!ex.test(value)) {
                    return '项目周期需为整数天';
                }
                else if (value < 3)
                    return '项目周期至少为3天';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        // 自定义验证规则 项目描述
        form.verify({
            text: function (value) {
                if (value.length == 0)
                    return '项目描述不能为空';
                if (value.length > 500)
                    return '项目描述不能超出500个字符';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 项目招募描述
        form.verify({
            itemNeedText: function (value) {
                if (value.length == 0)
                    return '招募要求不能为空';
                if (value.length > 500)
                    return '招募要求不能超出500个字符';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 邮箱
        form.verify({
            email: function (value) {
                if (value.length == 0) {
                    alert("尚未填写邮箱，请前往填写邮箱");
                    var userNo = [[${codeUsers.get(0).getUserNo()}]];
                    window.location.href = '/code/mc/logged/changeInformation?userNo=' + userNo;
                }
                var myforms = document.forms;
                var myemail = myforms[0].email.value;
                var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

                if (!myReg.test(value))
                    return '请输入正确的邮箱格式';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 手机号
        form.verify({
            phoneNum: function (value) {
                if (value.length == 0) {
                    alert("尚未填写手机号，请前往填写手机号");
                    var userNo = [[${codeUsers.get(0).getUserNo()}]];
                    window.location.href = '/code/mc/logged/changeInformation?userNo=' + userNo;
                }
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(value)) {
                    return '请输入正确的手机号格式';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });
    });

</script>

<script type="text/javascript">
    var test = document.getElementById('test');
    test.addEventListener('change', function () {
        var t_files = this.files;
        var str = '';
        for (var i = 0, len = t_files.length; i &lt; len; i++) {
            console.log(t_files[i]);
            str += '&lt;a href="javascript:void(0)">' + t_files[i].name + '&lt;/a>&lt;br/>';
        }
        ;
        document.getElementById('content').innerHTML = str;
    }, false);
</script>

<script type="text/javascript">

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }
</script>
</html>